<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="onChart">{{buttonText}}</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px" :gutter="10">
	  <el-col :span="6">
        <template>
          <el-cascader
          placeholder="全部项目/小区"
          :options="regionOptions"
          v-model="regionOptSelected"
          ></el-cascader>
        </template>
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="startTime"
          type="month"
          format="yyyy-MM"
          :editable="false"
          :clearable="false"
          value-format="yyyy-MM"
          placeholder="开始月">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="endTime"
          type="month"
          :editable="false"
          :clearable="false"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="结束月">
        </el-date-picker>
      </el-col>		  
      <el-col :span="3">
        <el-button type="primary" class="myBgGreen" @click="onSearch">查 询</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px">
      <el-col :span="24" v-if="isChart">
        <el-table
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          v-loading="loading"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="sta_time"
            label="统计时间"
            >
          </el-table-column>
          <el-table-column
            prop="expect_num"
            label="计划数量"
            >
          </el-table-column>
          <el-table-column
            prop="complete_num"
            label="完成数"
            >
          </el-table-column>
          <el-table-column
            prop="complete_rate"
            label="完成率(%)"
            >
          </el-table-column>
          <el-table-column
            prop="intime_num"
            label="及时完成数"
            >
          </el-table-column>
          <el-table-column
            prop="intime_rate"
            label="及时率(%)"
            >
          </el-table-column>
          <el-table-column
            prop="update_num"
            label="整改次数"
            >
          </el-table-column>
          <el-table-column
            prop="update_rate"
            label="整改率(%)"
            >
          </el-table-column>
          <el-table-column
            prop="area_name"
            label="统计小区"
            >
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" v-else>
		    <vue-highcharts :Highcharts="Highcharts" :options="option" ref="visitorChart" style="height: 600px"></vue-highcharts>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myColorRed{
    color: #f00;
  }
</style>

<script>
	  import VueHighcharts from 'vue2-highcharts';
	  import Highcharts from  "highcharts";
  	import { getRegion } from '@/utils/localstorage';
  	import { extractAreaIds } from '@/utils/misc';
  	import { getMaintenanceplanList } from '@/api/statisticalAnalysis';
  	export default {
    data(){
      	return{  
	        title:"设备维保数据",   
	        loading:false,
	        time:null,
	        typeValue:1,
	        regionOptions: [],
	        regionOptSelected: [],
	        list:[],
	        isChart:true,
	        buttonText:'图表',
	        startTime:(new Date().getFullYear())+'-'+('01'),
          endTime:(new Date().getFullYear())+'-'+('12'),
	        Highcharts: Highcharts,
        	option:{
        		chart: {
		            zoomType: ''
		        },
		        title: {
		            text: '设备维保数据'
		        },
		        subtitle: {
		            text: ''
		        },
		        credits:{
	                enabled: false  
	            },
	            colors:[
	                '#ffa92e',
                  '#00c2a9',
                  '#2eb3ff',
                  '#5db0eb',
                  '#d87c7a',
                  '#8698b5',
                  '#839335'
                ],
		        xAxis: [{
		            categories: [],
		            crosshair: true
		        }],
		        yAxis: [{ 
		            labels: {
		                format: '{value}次',
		                style: {
		                    color: Highcharts.getOptions().colors[1]
		                }
		            },
		            title: {
		                text: '次数',
		                style: {
		                    color: Highcharts.getOptions().colors[1]
		                }
		            }
		        }, { 
		            title: {
		                text: '比例',
		                style: {
		                    color: Highcharts.getOptions().colors[1]
		                }
		            },
		            labels: {
		                format: '{value} %',
		                style: {
		                    color: Highcharts.getOptions().colors[1]
		                }
		            },
		            opposite: true
		        }],
		        tooltip: {
		            shared: true
		        },
		        series: [
			        {
			            name: '计划总数',
			            type: 'column',
			            yAxis: 0,
			            data: [],
			            tooltip: {
			                valueSuffix: '次'
			            }
			        }, 
			        {
			            name: '完成数',
			            type: 'column',
			            yAxis: 0,
			            data: [],
			            tooltip: {
			                valueSuffix: '次'
			            }
			        },
			        {
			            name: '及时完成数',
			            type: 'column',
			            yAxis: 0,
			            data: [],
			            tooltip: {
			                valueSuffix: '次'
			            }
			        },
			        {
			            name: '整改次数',
			            type: 'column',
			            yAxis: 0,
			            data: [],
			            tooltip: {
			                valueSuffix: '次'
			            }
			        }, 
			        {
			            name: '完成率',
			            type: 'spline',
			            yAxis: 1,
			            data: [],
			            tooltip: {
			                valueSuffix: '%'
			            }
			        },
			        {
			            name: '及时率',
			            type: 'spline',
			            yAxis: 1,
			            data: [],
			            tooltip: {
			                valueSuffix: '%'
			            }
			        },
			        {
			            name: '整改率',
			            type: 'spline',
			            yAxis: 1,
			            data: [],
			            tooltip: {
			                valueSuffix: '%'
			            }
			        }
		        ],
        	}
     	}
    },
    created() {
     	  document.title=this.title;
      	this.regionOptions = getRegion();
        this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);
      
        this.onGetMaintenanceplanAnalysisList();      
    },
    computed: {
      	areaIds() {
        	return extractAreaIds(this.regionOptSelected, this.regionOptions);
      	}
    },
    components: {
        VueHighcharts 
    },
    methods:{
        onSearch(){
            this.onGetMaintenanceplanAnalysisList();           
        },
        onChart(){
            let vm=this;
            vm.isChart=!vm.isChart;
            if(vm.isChart){
                vm.buttonText='图表'
            }else{
                vm.buttonText='表格'
                setTimeout(function(){vm.onSetChartData()},100);
            }
        },
        onSetChartData(){
            let vm=this,lengthNum=vm.list.length;
            let xAxisList=new Array(lengthNum);//横坐标描述
            let seriesExpect_num=new Array(lengthNum);//计划数量
            let seriesComplete_num=new Array(lengthNum);//完成数
            let seriesIntime_num=new Array(lengthNum);//及时完成数
            let seriesComplete_rate=new Array(lengthNum);//完成率
            let seriesIntime_rate=new Array(lengthNum);//及时率
            let seriesUpdate_num=new Array(lengthNum);//整改数
            let seriesUpdate_rate=new Array(lengthNum);//整改率
            let visitorChart = vm.$refs.visitorChart;
            for(let i=0; i<lengthNum; i++){
                xAxisList[i]=vm.list[i].sta_time;
                seriesExpect_num[i]=vm.list[i].expect_num;
                seriesComplete_num[i]=vm.list[i].complete_num;
                seriesIntime_num[i]=vm.list[i].intime_num;
                seriesUpdate_num[i]=vm.list[i].update_num;
                seriesComplete_rate[i]=parseFloat(vm.list[i].complete_rate)||0;
                seriesIntime_rate[i]=parseFloat(vm.list[i].intime_rate)||0;
                seriesUpdate_rate[i]=parseFloat(vm.list[i].update_rate)||0;
            }
            if(vm.startTime<vm.endTime){
                visitorChart.getChart().setSubtitle({text:`<div>数据采集于 ${vm.startTime} 至 ${vm.endTime}</div>`});
            }else{
                visitorChart.getChart().setSubtitle({text:`<div>数据采集于 ${vm.endTime} 至 ${vm.startTime}</div>`});
            }
            vm.$refs.visitorChart.getChart().xAxis[0].setCategories(xAxisList);
            vm.$refs.visitorChart.getChart().series[0].update({
                data: seriesExpect_num
            })
            vm.$refs.visitorChart.getChart().series[1].update({
                data: seriesComplete_num
            })
            vm.$refs.visitorChart.getChart().series[2].update({
                data: seriesIntime_num
            })
            vm.$refs.visitorChart.getChart().series[3].update({
                data: seriesUpdate_num
            })
            vm.$refs.visitorChart.getChart().series[4].update({
                data: seriesComplete_rate
            })
            vm.$refs.visitorChart.getChart().series[5].update({
                data: seriesIntime_rate
            })
            vm.$refs.visitorChart.getChart().series[6].update({
                data: seriesUpdate_rate
            })
        },
        onGetMaintenanceplanAnalysisList(){
            let vm=this,params={}; 
            if(vm.startTime<vm.endTime){
                params={
                  area_id:vm.areaIds,
                  start_time:vm.startTime,
                  end_time:vm.endTime
                }
            }else{
                params={
                  area_id:vm.areaIds,
                  start_time:vm.endTime,
                  end_time:vm.startTime
                }
            }
            getMaintenanceplanList(params).then(response => {
                let res=response.data.MaintenancePlanAnalysis;
                vm.list=res;
                !vm.isChart?setTimeout(function(){vm.onSetChartData()},100):'';
                // console.log(res)
            }).catch(error => {
                // console.log(error)
            })
        }

      
    }

  }


</script>



